<template>
  <el-row :gutter="20" style="margin-left: 1px;">
    <el-col :span="6"><span>任务编号：{{ row.taskid }}</span></el-col>
    <el-col :span="6"><span>营业部名称：{{ row.yybName }}</span></el-col>
    <el-col :span="6"><span>客户号：{{ row.khh }}</span></el-col>
    <el-col :span="6"><span>客户姓名：{{ row.khxm }}</span></el-col>
  </el-row>
  <el-form 
    ref="formSearch" 
    label-width="auto" 
    :model="formSearch" 
    style="margin-top: 10px;"
  >
    <el-form-item label="指标名称: ">
      <el-input v-model="row.indexName" disabled></el-input>
    </el-form-item>
    <!-- <el-form-item label="任务内容: ">
      <el-input 
        type="textarea" 
        v-model="row.content"
        readonly 
      />
    </el-form-item> -->
    <el-form-item label="反馈信息: ">
      <div class="timeline-wrap">
      </div>
    </el-form-item>
    <el-form-item label="填写反馈: " prop="content" v-if="editable" required>
      <el-input type="textarea" v-model="formSearch.content"></el-input>
    </el-form-item>
    <el-form-item label="上传附件: "  v-if="editable">
      <el-upload
        action=""
        show-file-list
        :limit="1"
        :auto-upload="false"
        :http-request="handleUploadFile"
        :file-list="fileList"
        :on-change="handleChange"
        :on-remove="onRemove"
      >
        <el-button slot="trigger" size="small" type="primary">
          选取文件
        </el-button>
        <span class="tip">单次仅支持上传30M以内的文件</span>
      </el-upload>
    </el-form-item>
  </el-form>
  <div class="btn-group" v-if="editable">
    
    <el-button type="primary" @click="onSubmit">提交</el-button>
  </div>
</template>

<script>

export default {
  props: {
    currentRow: Object
  },
  data(){
    return {
      row: {},
      list: [],
      editable: true,
      dialog: false,
      formSearch: {
        content: ''
      },
      fileList: [],
      maxSize: 30 * 1024 * 1024,
      loading: null
    }
  },
  mounted() {
    console.log(this.currentRow);
    
    this.row = this.currentRow;
      this.editable = true;
      this.formSearch.content = '';
      this.fileList = [];
      this.getFeedbackInfo();

  },
  methods: {
    onSubmit(){

    },
    formate(date){
      return formateDate(date)
    },
    downFile(address){
      
    },
    handleSubmit(fileAddress){
      
    },

    handleChange(file, fileList) {
      if(file.size > this.maxSize){
        this.$message.warning("仅支持上传30M以内的文件");
        this.fileList = this.fileList.filter(item => {
          if(item.size < this.maxSize){
            return item;
          }
        })
        return;
      }
      this.fileList = fileList;
    },

    //文件上传功能
    handleUploadFile() {
      const name = this.fileList[0].raw.name

      const extReg = /.[a-z]+$/;
      if(!extReg.test(name)){
        this.$message.warning('文件类型不存在，请重新上传！');
        this.loading.close();
        return 
      }

      const fd = new FormData();

      this.fileList.forEach(item => {
        fd.append('multipartFile', item.raw);
        fd.append('serviceName', 'taskfeedbackfile');
      })

      
    },

    onRemove(file, fileList) {
      //  新增文件信息
      this.fileList = this.fileList.filter((item) => {
        if (item.uid !== file.uid) {
          return item;
        }
      });
    },

    getFeedbackInfo(){
      let param = {
        params: {
          taskid: this.row.taskid,
          status: this.row.status
        }
      }
      
    },

    close(){
      this.dialog = false;
      this.loading.close();
      this.loading = null;
    },

    open(row, editable){
      
    }
  },
};
</script>

<style lang="less" scoped>
  .timeline-wrap {
    width: 100%;
    min-height: 32px;
    max-height: 200px;
    padding: 0 10px;
    border: 1px solid #d7dde4;
    overflow: auto;
    border-radius: 4px;
  }

  .tip {
    color: red;
  }

  .box {
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    line-height: 16px;
  }

  .btn-group {
    display: flex;
    justify-content: right;
    margin-top: 10px;

  }

  .icon-t-b-download:hover{
    color: #1890ff;
    cursor: pointer;
  }

  :deep(.el-textarea__inner) {
    height: 200px;
  }

</style>